<template>
    <div class="photo-container">
        <v-tabs
                color="cyan"
                dark
                next-icon="mdi-arrow-right-bold-box-outline"
                prev-icon="mdi-arrow-left-bold-box-outline"
                show-arrows
        >
            <v-tabs-slider  color="yellow"></v-tabs-slider>
            <v-tab
                    v-for="(item,i) in cates"
                    :key="i"
                    :href="'#tab-' + item.id"
                    :cateId="item.id"
                    @click="getPhotoListByCateId(item.id)"
            >
                {{ item.title }}
            </v-tab>

            <v-tabs-items v-model="tab"
            >
                <v-tab-item
                        v-for="(item,i) in cates"
                        :key="i"
                        :value="'tab-' + item.id"
                >
                    <v-layout
                            class="v-tabs-items scroll-y"
                            id="scroll-target"
                            :style="'max-height: '+ clientHeight + 'px; ' + 'min-height: '+ clientHeight + 'px'"
                    >
                        <v-card flat
                                v-scroll:#scroll-target="onScroll"
                                v-touch="{
                                                  left: () => swipe('Left'),
                                                  right: () => swipe('Right'),
                                                  up: () => swipe('Up'),
                                                  down: () => swipe('Down')
                                                }"
                        >
                            <ul class="photo-list">
                                <router-link tag="li" v-for="item in list" :key="item.id" :to="'/home/photoList/photoinfo/' + item.id">
                                    <img v-lazy="item.img_url">
                                    <div class="info">
                                        <h3 class="info-title">{{item.title}}</h3>
                                        <div class="info-summary">{{ item.zhaiyao}}</div>
                                    </div>
                                </router-link>
                            </ul>
                        </v-card>
                    </v-layout>
                </v-tab-item>
            </v-tabs-items>
        </v-tabs>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                cates: [],
                list: [],
                tab: null,
                show: true,
                clientHeight: 0,
                clientWidth: 0,
                offsetTop: 0,
                swipeDirection: 'None'
            }
        },
        created() {
            this.getAllCategory()
            this.getPhotoListByCateId(0)
        },
        mounted(){
            this.clientHeight = window.innerHeight || document.documentElement.clientHeight
            this.clientWidth = window.innerWidth || document.documentElement.clientWidth
        },
        watch: {
            tab: function(val) {
                if (val === undefined) return;
                this.getPhotoListByCateId(val.split('-')[1])
            }
        },
        methods: {
            swipe (direction) {
                this.swipeDirection = direction
                if (this.swipeDirection === "Left" || this.swipeDirection === "Right"){
                    // document.querySelector(".v-tabs__item--active")
                    // this.getPhotoListByCateId()
                }
                if (this.swipeDirection === "Up" && this.offsetTop > this.clientHeight/2){
                    this.show = false
                    document.querySelector(".v-tabs__container").style.height = "0px"
                }else {
                    this.show = true
                    document.querySelector(".v-tabs__container").style.height = "48px"

                }
            },
            onScroll (e) {
                this.offsetTop = e.target.scrollTop
            },
            getAllCategory() {
                this.$http.get('api/getimgcategory/').then(result => {
                    if (result.body.status === 0) {
                        result.body.message.unshift({title: "全部", id: 0})
                        this.cates = result.body.message
                    }
                })
            },
            getPhotoListByCateId(cateId) {
                this.$http.get('api/getimages/' + cateId).then(result => {
                    if (result.body.status === 0) {
                    }
                    this.list = result.body.message
                })
            }
        }
    }
</script>


<style lang="scss">
    .photo-container {
        .v-tabs__icon{
            z-index: 99;
        }
        .v-tabs__wrapper--show-arrows {
            margin-left: 0;
            margin-right: 0;
        }
        .v-tabs-items {
            .v-card{
                width: 100%;
                .photo-list {
                    list-style: none;
                    padding: 10px;
                    margin: 0;
                    li {
                        position: relative;
                        margin-bottom: 10px;
                        background-color: white;
                        text-align: center;
                        box-shadow: 0 0 8px #999;
                        img {
                            width: 100%;
                            vertical-align: middle;
                        }
                        .info{
                            position: absolute;
                            bottom: 0;
                            max-height: 84px;
                            text-align: left;
                            color: white;
                            background-color: rgba(0,0,0,0.5);
                            .info-title{
                                font-size: 14px;
                            }
                            .info-summary{
                                font-size: 13px;
                            }
                        }
                    }
                }
            }
        }
        img[lazy=loading] {
            width: 40px;
            height: 300px;
            margin: auto;
        }
    }
</style>